<template>
  <div class="personal-main">
    <div class="personal-investnote">
      <h3><i>还款计划</i></h3>
      <div class="investnote-money">
        <span
          ><b class="fb">借款金额</b><br />
          <i>{{ total }}</i> 元
        </span>
        <span
          ><b class="fb">待还本金</b><br />
          <i>{{ totalPrincipal }}</i> 元
        </span>
        <span class="none"
          ><b class="fb">待还利息</b><br />
          <i>{{ totalInterest }}</i> 元
        </span>
      </div>
      <form id="form" name="form" method="post" action="">
        <span id="form:dataTable">
          <div class="invest-tab">
            <ul>
              <li class="on">
                <span><a href="#" title="全部">全部 </a> </span>
              </li>
              <li><a href="#" title="待还款">待还款 </a></li>
              <li><a href="#" title="已还款">已还款 </a></li>
            </ul>
          </div>
          <div class="investnote-list">
            <div class="investnote-contitle">
              <span class="investnote-w1 fb">期数</span>
              <span class="investnote-w1 fb">本金</span>
              <span class="investnote-w1 fb">利息</span>
              <span class="investnote-w1 fb">状态</span>
              <span class="investnote-hbw5 fb">还款日期</span>
              <span class="investnote-hbw6 fb">操作</span>
            </div>
            <ul>
              <li v-for="lendReturn in lendReturns" :key="lendReturn.id">
                <span class="investnote-w1">{{ lendReturn.currentPeriod }}</span
                ><span class="investnote-w1 fb">{{ lendReturn.principal }}</span
                ><span class="investnote-w1 fb">{{ lendReturn.interest }}</span
                ><span class="investnote-w1 fb">{{
                  lendReturn.status == 0 ? "未还款" : "已还款"
                }}</span>
                <span class="investnote-hbw5">{{ lendReturn.returnDate }}</span>
                <span class="investnote-hbw6">
                  <el-button
                    v-if="
                      lendReturn.status === 0 &&
                        current === lendReturn.currentPeriod
                    "
                    type="text"
                    @click="handleLendReturn(lendReturn)"
                    >{{ "还款" }}
                  </el-button>
                  <el-button
                    v-else-if="lendReturn.status === 0"
                    disabled
                    type="text"
                  >
                    {{ "还款" }}
                  </el-button>
                  <el-button v-else type="text" disabled>
                    {{ "已还款" }}
                  </el-button>
                </span>
              </li>
              <!--<div style=" width:760px;height:200px;padding-top:100px; text-align:center;color:#d4d4d4; font-size:16px;">
								 <img src="images/nondata.png" width="60" height="60"><br><br>
								   暂无投资记录</div>-->
            </ul>
          </div>
        </span>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lendReturns: [],
      total: 0,
      totalPrincipal: 0,
      totalInterest: 0,
      current: -1,
    };
  },
  mounted() {
    this.fetchLendReturns();
  },
  methods: {
    //还款按钮事件函数
    handleLendReturn(lendReturn) {
      let token = localStorage.getItem("srb-token");
      let srbUser = localStorage.getItem("srb-user");
      if (!(token && srbUser && JSON.parse(srbUser).userType === 2)) {
        this.$message.warning("未登录或者身份错误");
        return;
      }
      this.$alert(
        '<div style="size: 18px;color: red;">您即将前往汇付宝绑定还款</div>',
        "前往汇付宝资金托管平台",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "立即前往",
          //callback 点击立即前往按钮的回调函数
          callback: (action) => {
            //action代表点击操作类型(cancel  confirm)
            //TODO 提交用户信息
            console.log("操作：" + action);
            if (action === "confirm") {
              //跳转到hfb
              this.$axios({
                url: `/api/core/lendReturn/auth/commitReturn/${lendReturn.id}`,
                method: "POST",
                headers: { token }, //{token:token}
              }).then((r) => {
                //document代表文档对象，write可以将标签字符串写入到页面中，浏览器就会自动解析页面中的代码
                document.write(r.data.data.form);
              });
            }
          },
        }
      );
    },
    fetchLendReturns() {
      let token = localStorage.getItem("srb-token");
      let srbUser = localStorage.getItem("srb-user");
      console.log(1, token, this.userType);

      //如果已登录
      if (token && srbUser && JSON.parse(srbUser).userType === 2) {
        console.log(2, token, this.userType);
        this.$axios({
          url: "/api/core/lendReturn/auth/list",
          method: "GET",
          headers: { token },
        }).then((r) => {
          this.lendReturns = r.data.data.items;
          this.total = r.data.data.total;
          this.totalPrincipal = r.data.data.totalPrincipal;
          this.totalInterest = r.data.data.totalInterest;
          this.current = r.data.data.current;
        });
      }
    },
  },
};
</script>
